@import url(./base.less);

body {}

/* 顶部导航公共样式  headerContainer*/
.headerContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, .06);
    z-index: 9;

    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 72px;

        /* logo图片 */
        img {
            height: 72px;
            width: 200px;
        }

        .navbar {
            display: flex;
            align-items: center;

            li {
                height: 72px;

                a {
                    display: inline-block;
                    margin: 0 20px;
                    color: rgba(0, 0, 0, .87);
                    font-size: 15px;
                    height: 72px;
                    line-height: 72px;
                    text-decoration: none;
                }

                // 高亮样式
                .active {
                    color: #000;
                    font-weight: 700;
                    border-bottom: 2px solid #4772fa;
                }

                /* 创建免费账号样式 */
                &:last-child {
                    width: auto;

                    a {
                        display: inline;
                        transition: all .2s ease;
                        border: 1px solid rgba(0, 0, 0, .24);
                        border-radius: 6px;
                        color: rgba(0, 0, 0, .87);
                        padding: 8px 20px;
                        width: 132px;
                    }
                }
            }
        }
    }
}


/* 底部公共样式 footer */
.footer {
    background-color: #fafafa;

    .footer-container {
        padding: 90px 0 160px;

        .links {
            display: flex;
            justify-content: space-between;
            padding-bottom: 96px;
            border-bottom: 1px solid #dcdcdc;

            .pageLinks {
                display: flex;

                dl {
                    width: 200px;

                    dt {
                        margin-bottom: 30px;
                        font-size: 16px;
                        font-weight: 700;
                    }

                    dd {
                        margin-bottom: 12px;

                        a {
                            font-size: 14px;
                            color: #5a5a5a;
                        }
                    }
                }
            }

            //   <!-- 切换语言 -->
            .mediaLinks {
                position: relative;
                display: flex;
                justify-content: space-between;

                width: 200px;
                height: 46px;
                line-height: 46px;
                padding: 0 16px;
                border-radius: 6px;
                border: 1px solid;
                font-size: 14px;
                cursor: pointer;
                font-weight: 700;

                /* 三角符号 */
                .triangle {
                    margin-top: 20px;
                    height: 12px;
                    border: 6px solid #fafafa;
                    border-top-color: #000;

                }

                /* 选项 */
                .languagePicker {
                    display: none;
                    position: absolute;
                    left: 50%;
                    bottom: -25px;
                    -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
                    // z-index: -1;
                    width: 100%;
                    min-width: 95px;
                    padding: 6px 0;
                    background: #fff;
                    overflow-x: hidden;
                    border: 1px solid #ececec;
                    border-radius: 0.25rem;
                    -webkit-box-shadow: 0 -7px 18px rgba(0, 0, 0, .12);
                    box-shadow: 0 -7px 18px rgba(0, 0, 0, .12);

                    li {
                        padding: 0 6px;
                        font-weight: 400;

                        &:hover {
                            background-color: #4772fa;
                        }
                    }
                }

                .open {
                    display: block;
                    z-index: 1;
                }
            }
        }

        .copyrightWrapper {
            margin-top: 36px;

            span {
                margin-right: 10px;
                font-size: 14px;
                color: #5a5a5a;

                img {
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    vertical-align: middle;
                }
            }
        }
    }
}